import * as echarts from "echarts";
// 用电监测
export const use_power_option = (data) => {
  const x = [];
  const y = [];
  data.forEach((ele) => {
    x.push(ele.time)
    // y.push(ele.energy)
    y.push(ele.power)
  })
  const o = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross"
      },
      // formatter (params) {
      //   var relVal = params[0].name;
      //   for (var i = 0, l = params.length; i < l; i++) {
      //     //遍历出来的值一般是字符串，需要转换成数字，再进项tiFixed四舍五入
      //     relVal +=
      //       "<br/>" +
      //       params[i].marker +
      //       params[i].seriesName +
      //       " : " +
      //       Number(params[i].value).toFixed(2) +
      //       "%";
      //   }
      //   return relVal;
      // }
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      // data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      data: x,
      axisLabel: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      }
    },
    yAxis: {
      type: "value",
      axisLabel: {
        show: false
      },
      axisLine: {
        show: false
      }
    },

    series: [
      {
        // name: "耗值：30.5 kwh",
        name: "耗值",
        type: "line",
        smooth: false,
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(42, 123, 255, 0.45)"
            },
            {
              offset: 1,
              color: "rgba(42, 123, 255, 0)"
            }
          ])
        },
        itemStyle: {
          normal: {
            color: "#2A7BFF", //折线图与小圆点颜色
            lineStyle: {
              width: 1 //线条宽度
            }
          }
        },
        // data: [150, 230, 224, 218, 135, 147, 260]
        data: y
      }
    ],
    grid: {
      top: "3%",
      left: "left",
      right: "0%",
      bottom: "10%",
      containLabel: true
    }
  }
  return o
};

/**
 * 实时数据图表
 * @param {*} data 数据
 */
export const realTimeChartOption = (data, title) => {
  const typeObj = {
    用电能耗: {
      text: "energy",
      unit: "kWh"
    },
    功率因数: {
      text: "powerFactor",
      unit: ""
    },
    电流: {
      text: "electricity",
      unit: "A"
    },
    电压: {
      text: "voltage",
      unit: "V"
    },

    功率: {
      text: "power",
      unit: "W"
    },
    温度: {
      text: "temperature",
      unit: "℃"
    },
    电弧: {
      text: "faultArc",
      unit: "个/s"
    }

  };
  const x = [];
  const y = [];

  data.data.forEach(e => {
    x.push(e.time);
    y.push(e[typeObj[title].text]);
  });

  const o = {
    title: [
      {
        left: '1%',
        text: title,
        top: "6.5%",
        textStyle: {
          fontSize: 18,
          fontWeight: 500,
          color: "#272C33",
        },

      },
      {
        text: typeObj[title].unit,
        right: "5%",
        top: "15%",
        textStyle: {
          fontSize: 14,
          fontWeight: 400,
          color: "#86909C"
        }
      }
    ],
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "line"
      },
      backgroundColor: "rgba(255, 255, 255, 1)",
      textStyle: {
        color: "rgba(39, 44, 51, 1)"
      },
      formatter: params => {
        let aa = "";

        params.forEach(e => {
          aa =
            '<div style="padding:14px 10px;display:flex;flex-direction:column;row-gap:14px;">' +
            `<div>时间：${e.name}</div>` +
            `<div  >${title}：<span style="font-size:18px;font-weight:bold;">
            ${e.value} ${typeObj[title].unit}
            </span>
            </div>` +
            "</div>";
        });
        return aa;
      }
    },
    grid: {
      left: "2%",
      right: "2%",
      top: "21%",
      bottom: "15%",
      containLabel: true
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: x,
      axisLabel: {
        show: true,
        color: "rgba(39, 44, 51, 1)",
        formatter: val => {
          const a = val.split(" ");
          return a[0] + "\n" + a[1];
        }
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "rgba(216, 216, 216, 0.23)"
        }
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: "dashed",
          color: "rgba(216, 216, 216, 1)"
        }
      }
    },
    yAxis: {
      type: "value",
      // minInterval: 20,
      min: 0,
      max: title == '功率因数' ? 1 : 'dataMax',
      axisLabel: {
        show: true,
        color: "rgba(39, 44, 51, 1)",
        padding: [0, 10, 0, 0]
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "rgba(216, 216, 216, 1)"
        }
      }
    },
    dataZoom: [
      {
        type: "inside",
        start: 0,
        end: 100
      },
      {
        start: 0,
        end: 100
      }
    ],
    series: [
      {
        name: "",
        type: "line",
        smooth: 0.5,
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(1, 158, 255, 1)"
            },
            {
              offset: 1,
              color: "rgba(1, 158, 255, 0)"
            }
          ])
        },
        itemStyle: {
          normal: {
            color: "rgba(1, 158, 255, 1)",
            lineStyle: {
              width: 1
            }
          }
        },
        data: y
      }
    ]
  };

  return o;
};

/**
 * 按月统计报警/故障
 * @param {*} data 数据
 */
export const alarmStatisticsOption = (data, str) => {
  let arr = Object.keys(data);
  if (arr.length == 0) return;

  const x = [];
  const y = [];

  arr.forEach(e => {
    x.push(e);
    y.push(data[e]);
  });

  const o = {
    color: "#5D9AFF",
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow"
      }
    },
    grid: {
      top: "3%",
      left: "left",
      right: "0%",
      bottom: "0%",
      containLabel: true
    },
    xAxis: {
      type: "category",
      data: x,
      axisTick: {
        alignWithLabel: true,
        show: false
      },
      axisLabel: {
        color: "#272C33"
      }
    },
    yAxis: [
      {
        minInterval: 1,
        type: "value",
        scale: true,
        boundaryGap: true,
        axisTick: {
          show: false
        },
        axisLine: {
          show: false
        },
        axisLabel: {
          color: "#272C33"
        }
      }
    ],
    series: {
      name: str,
      type: "bar",
      barWidth: "20",
      data: y,
      itemStyle: {
        normal: {}
      }
    }
  };

  return o;
};
